<template>
  <div>
    <div style="margin-top: 10px;margin-bottom: 10px">
<!--     <el-button type="primary" style="margin-bottom: 20px;background: #2cc8b7" @click="addmedicine" icon="el-icon-plus" >添加药物</el-button>-->
      <el-input maxlength="8" show-word-limit v-model="input" placeholder="请输入药物名称" style="width: 200px"></el-input>
      <el-input maxlength="5" show-word-limit v-model="input1" placeholder="请输入药物编号" style="width: 200px;margin-left: 0px"></el-input>
      <el-button icon="el-icon-search" circle style="margin-left: 5px" @click="find"></el-button>
      <el-button icon="el-icon-refresh-right" circle style="margin-left: 5px" @click="shuaxin"></el-button>
    </div>
    <div>
      <el-table class="el"
                :data="tableData"
                border
                style="width: 1200px">
        <el-table-column
          label="药物编号"
          width="200"
          align="center">
          <template slot-scope="scope">
            <i class="el-icon-star-off"></i>
            <span style="margin-left: 10px">{{ scope.row.mid }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="药物名称"
          width="200"
          align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.mname }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="药物价格"
          width="200"
          align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.mprice }}元</span>
          </template>
        </el-table-column>


        <el-table-column
          label="供应商名称"
          width="200"
          align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.pname }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="供应商编号"
          width="200"
          align="center">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>供应商名称:{{ scope.row.pname }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.pid }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>


        <el-table-column label="操作"
                         align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="success"
              @click="handleEdit(scope.$index, scope.row)">购买</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="currentPage"
        :total="total"
        :page-sizes="[5, 10, 15]"
        :page-size="pageSize"
        background
        layout="prev, pager, next, sizes, total, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog title="购买药物" :visible.sync="dialogFormVisible1" style="width: 1200px">
      <el-form :model="form1">
        <el-form-item label="药物名称" :label-width="formLabelWidth">
          <el-input v-model="form1.mname"  disabled="true" autocomplete="off" style="width: 300px"  placeholder="请输入药物名称"></el-input>
        </el-form-item>
        <el-form-item label="药物价格" :label-width="formLabelWidth">
          <el-input v-model="form1.mprice" disabled="true" autocomplete="off" style="width: 300px" placeholder="请输入药物价格"></el-input>
        </el-form-item>
        <el-form-item label="数量" :label-width="formLabelWidth">
          <el-input-number v-model="num" :min="1" :max="10" @change="change($event)"></el-input-number>
        </el-form-item>
        <el-form-item label="总价" :label-width="formLabelWidth">
          <el-input
            v-model="form1.sum"
            style="width: 100px"
            :disabled="true">
          </el-input>
          <span>元</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="ok1">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {medicineselect,provider,insertorder} from "../../api";

  export default {
    inject:['reload'],
    data() {
      return {
        dataList:[],
        currentPage: 1, //当前页
        pageSize: 5, //每页行数
        total: 0,
        tableData: [
        ],
        num:1,
        formLabelWidth: '100px',
        dialogTableVisible: false,
        dialogFormVisible1:false,
        dialogFormVisible: false,
        input:'',
        input1:'',
        x:'',
        count:'',
        form: {
          mname: '',
          mprice: '',
          pid: '',
        },
        form1:{
          mname:'',
          mprice:'',
          sum:''
        }
      }
    },

    methods: {
      handleEdit(index, row) {
        this.dialogFormVisible1=true
        this.x=this.tableData[index].mid
        this.count=this.tableData[index].mprice
        this.form1.mname=this.tableData[index].mname
        this.form1.mprice=this.tableData[index].mprice
        this.form1.sum=this.tableData[index].mprice*this.num
      },
      ok1()
      {
        insertorder({id:this.x,oname:this.form1.mname,price:this.form1.mprice,sl:this.num,uid:window.localStorage.getItem('id'),
        sums:this.form1.sum,time:(new Date().getFullYear()+'-'+(new Date().getMonth()+1)+'-'+new Date().getDate())})
        .then((res=>{
          if(res.data.code==200)
          {
            this.$message.success('购买成功')
            this.dialogFormVisible1=false
          }else{
            this.$message.error("购买失败")
          }
        }))
      },
      cancel()
      {
        this.dialogFormVisible1=false
        this.num=1
      },
      change()
      {
        let s=parseFloat(this.count)
        this.form1.sum=((this.num*s*10)/10).toFixed(1)
      },
      find()
      {
        if(this.input1!='0') {
          medicineselect({mname: this.input, mid: this.input1}).then((res => {
              this.tableData = res.data.data
              let x = 0,y=0
              for (let i = 0; i < this.tableData.length; i++) {
                provider({id: this.tableData[i].pid}).then((res => {
                  this.tableData[x].pname = res.data.data[0].name
                  x++
                }))
              }
              for (let i=0;i<this.dataList.length;i++)
              {
                provider({id:this.dataList[i].pid}).then((res=>{
                  this.dataList[y].pname=res.data.data[0].name

                  y++
                }))
              }
            }
            //console.log(this.tableData)
          ))
        }else {this.$message.error("编号不能为0")}
      },
      shuaxin()
      {
        this.reload()
      },
      selectInfo()
      {

        medicineselect({}).then((res=>{
            this.tableData=res.data.data
            this.dataList = res.data.data;
            this.total = res.data.data.length;
            this.handleCurrentChange(1);
            let x=0,y=0
            for (let i=0;i<this.tableData.length;i++)
            {
              provider({id:this.tableData[i].pid}).then((res=>{
                this.tableData[x].pname=res.data.data[0].name
                x++
              }))
            }
            for (let i=0;i<this.dataList.length;i++)
            {
              provider({id:this.dataList[i].pid}).then((res=>{
                this.dataList[y].pname=res.data.data[0].name

                y++
              }))
            }
          }

        ))
      },
      handleSizeChange: function (pageSize) {
        this.pageSize = pageSize;
        this.handleCurrentChange(this.currentPage);
        this.handleCurrentChange(1);
      },
      //页码切换
      handleCurrentChange: function (currentPage) {
        this.currentPage = currentPage;
        this.currentChangePage(this.dataList, currentPage);
      },
      //分页方法
      currentChangePage(list, currentPage) {
        let from = (currentPage - 1) * this.pageSize;
        let to = currentPage * this.pageSize;
        this.tableData = [];
        for (; from < to; from++) {
          if (list[from]) {
            this.tableData.push(list[from]);
          }
        }
        console.log(this.tableData);
      }
    },
    created() {
      //setTimeout(500)
      this.selectInfo()


    }

  }
</script>
<style>

</style>
